<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>webrx-7031633</title>
    <link rel="stylesheet" href="css/index.css?v=20170">
    <%--引入jquery--%>
    <script src="js/jquery-3.2.1.min.js"></script>
    <%--引入layer显示层--%>
    <script src="js/layer/layer.js"></script>
    <script>
        $(function () {
            //layer.msg('hello');
            //找到属性传值那个标签
            //找到a标签中有id属性的那个标签   a[id]   而attr()是或者值，注意两者的区别
            $('a[id]').click(function () {
                shanchu($(this).attr("title"),$(this).attr("id"))
            });
//利用
            $('.tt a[uid]').click(function () {
                //在这之前先修改成功

                layer.open({
                    type: 1,
                    title: "修改图书信息",
                    closeBtn: 0,
                    area: '516px',
                    skin: 'layui-layer-nobg', //没有背景色
                    shadeClose: true,
                    content: $('.upbook')
                });
            })
            //将.upbook显示层隐藏
            $('.upbook').hide();
        });
        function shanchu(info,id) {
            layer.confirm('确定要删除:'+info+'?', {
                btn: ['确定','取消'] //按钮
            },function(){
                location.href="/delete?id="+id;
            },null);
        }
    </script>
</head>
<body>

<h3>图书管理系统</h3>
<%--这里放一个隐藏的显示层--%>
<div class="upbook">
fffffffffff
</div>


<table class="tt">
    <tr>
        <th>编号</th>
        <th>名称</th>
        <th>价格</th>
        <th>出版日期</th>
        <th>操作</th>
    </tr>
    <c:forEach items="${book}" var="b">
        <tr>
            <td>${b.id}</td>
            <td>${b.name}</td>
            <td>${b.price}</td>
                <%--以前是这样的<td>${b.bdate}</td>--%>
                <%--格式化之后是这样的--%>
            <td><fmt:formatDate value="${b.bdate}" pattern="yyyy-MM-dd HH:mm:ss"/></td>


                <%--  平常当我们执行一些点击删除或者修改传值的时候就会显示在网址上，如果想隐藏
                注意，将href=/delete?id=${b.id}变成href=/delete/${b.id} ,同时控制器页面也要改
                  例如：
                  将这个
                  @RequestMapping("delete")
                    public String del(int id){
                    bdao.delete(id);
                    return "redirect:/";
                    }
                    改为
                  @RequestMapping("delete/{id}")
                    public String del(@PathVariable("id") int id){
                        bdao.delete(id);
                        return "redirect:/";
                        }--%>
            <%--这是最原始的删除弹出层提醒方式--%>
            <td><a href="/delete?id=${b.id}" onclick="return confirm('是不是要删除：${b.name}?')">原始删除</a>&nbsp;
            <%--用了layer之后--%>
                <a href="javascript:void(0)" onclick="shanchu('${b.name}',${b.id})">layer删除</a>&nbsp;
                <a href="javascript:void(0)" id="${b.id}" title="${b.name}">属性传值删除</a>&nbsp;
                <a href="javascript:void(0)" uid="${b.id}")>修改</a></td>
        </tr>
    </c:forEach>
    <tr>
        <td colspan="100">
            <a href="/insert">添加新书</a>
        </td>
    </tr>
</table>
</body>
</html>
